
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<link href='http://www.iconj.com/ico/4/t/4tr0bc4r7v.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

<link href='http://www.iconj.com/ico/4/t/4tr0bc4r7v.ico' rel='icon' type='image/x-icon'/>

<link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Animated CSS3 Navigation Menu | ONLINETRICK demo</title>



<style>

#navbar-iframe {display:none!important}

<style type="text/css">

body {

margin: 0;

font-family: "Arial";

font-size: 14px;

line-height: 1.5;

background: #FFF9DF;

text-align: center; 

}

.header{

	text-align:center;

	width:100%;

	height:30px;

	clear:both;

	background:#000;

	margin-bottom:20px;

	border-bottom:7px solid #222;

	font-size:14px;

        font-family: 'Acme', sans-serif;

	line-height:35px;

	text-shadow:1px 1px 1px #000;

}

.header a{

	color:#fff;

	text-shadow:1px 1px 1px #000;

	padding-right:20px;

        -webkit-transition: padding-left 250ms ease-out;

        -moz-transition: padding-left 250ms ease-out;

}

.header a:hover{

	color:#fff;

        padding-left: 20px;

}    

.left{

	float:left;

	margin-left:10px;

}

.back{

	position:absolute;

	right:10px;

	top:0px;

}

.footer {

	position:absolute;

	width:100%;

	height:50px;

        font-family: 'Acme', sans-serif;

	line-height:50px;

	bottom:0; /* stick to bottom */

	background:#f0f0f0;

	border-top:7px dashed yellow;

	text-align:center;

	text-shadow:1px 1px 1px #000;

	color:#fff;

	background:#000;

}

.footer a{

        text-decoration: none;

	color:#aaa;

	padding:0px 10px;

	text-shadow:1px 1px 1px #000;

        -webkit-transition: padding-left 250ms ease-out;

        -moz-transition: padding-left 250ms ease-out;

}

.footer a:hover{

	color:#fff;

	text-shadow:0px 0px 1px #fff;

        padding-left: 20px;}

#container {

margin: 20% auto 0 auto;

display: block;

width: 750px; 

text-align:center;

}

h2{clear:both;padding-top:30px;font-family: 'Acme', sans-serif;}

            #menu li {

                display: inline;

                list-style: none;

                padding: 0;

            }

            

            #menu li a {

                

                border: 1px solid #3d8bf2;

                padding: 15px 20px 15px 20px;

                text-decoration: none;

                font-family: 'Acme', sans-serif;

                color:#fff;

                margin-left: -5px;

                background-image: url('http://1.bp.blogspot.com/-OY6fy5_2VRQ/TvMX_Ghr9sI/AAAAAAAABNs/KxpX9eFD9j4/s1600/menubgot.PNG');

                background-position: left;

                -webkit-transition: all 0.7s ease-in-out;

                -moz-transition: all 0.7s ease-in-out;

                -o-transition: all 0.7s ease-in-out;

            }

            

            #menu li a:hover {

                background-position:right;

            }



#menu2 li {

                display: inline;

                list-style: none;

                padding: 0;

            }

            

            #menu2 li a {

                

                border: 1px solid #3d8bf2;

                padding: 15px 20px 15px 20px;

                text-decoration: none;

                font-family: 'Acme', sans-serif;

                color:#fff;

                margin-left: -5px;

                background-image: url('http://4.bp.blogspot.com/-XjoGtTgSA9o/TvMZmnoNaCI/AAAAAAAABN4/6fFXHwEcFck/s1600/toptodownot.PNG');

                background-position: bottom;

                -webkit-transition: all 0.6s ease-in-out;

                -moz-transition: all 0.6s ease-in-out;

                -o-transition: all 0.6s ease-in-out;

            }

            

            #menu2 li a:hover {

                background-position:top;

            }

            

</style>



<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<!-- --><style type="text/css">@import url(http://www.blogger.com/static/v1/v-css/navbar/697174003-classic.css);
div.b-mobile {display:none;}
</style>

</head>



<body><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener("load",
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=5898368230699379375&amp;blogName=Slider&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=BLUE&amp;layoutType=CLASSIC&amp;searchRoot=http://menu2-onlinetrick.blogspot.com/search&amp;blogLocale=en_GB&amp;homepageUrl=http://menu2-onlinetrick.blogspot.com/&amp;vt=5962181195586858900" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
<div></div>

<div class="header">

				<a class="left" href="#"> <<< Back to the Tutorial</a>

				<a class="back" href="http://onlinepctrick.blogspot.com/"> ONLINETRICK </a>

			</div>

        <div id="container">



<h2>Example 1</h2>

<ul id="menu">

                <li> <a href="#">Home</a> </li>

                <li> <a href="#">Products</a> </li>

                <li> <a href="#">Services</a> </li>

                <li> <a href="#">About</a> </li>

                <li> <a href="#">Contact</a> </li>

            </ul>

<h2>Example 2</h2>

<ul id="menu2">

                <li> <a href="#">Home</a> </li>

                <li> <a href="#">Products</a> </li>

                <li> <a href="#">Services</a> </li>

                <li> <a href="#">About</a> </li>

                <li> <a href="#">Contact</a> </li>

            </ul></div>

<div class="footer">

				Follow us >>>

				<a href="http://twitter.com/onlinetrick">Twitter</a>|

				<a href="http://www.facebook.com/onlinetrick">Facebook</a>|

				<a href="http://feeds.feedburner.com/onlinetrick">RSS</a>

			</div></div>

<script type="text/javascript" src="http://www.blogger.com/static/v1/common/js/3407999231-csitail.js"></script>
<script type="text/javascript">BLOG_initCsi('classic_blogspot');</script></body>

</html>
